import React, { PureComponent } from 'react'
import { withRouter } from "react-router-dom";
import { Button, Select } from "antd";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import { connect } from "react-redux";
import {
    getRoleList,
    getRoleInfo
} from "@sagas/employee";
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
import DoubleCheck from "@common/presentational/DoubleCheck";
import BilinIcon from "@common/presentational/BilinIcon";
@withRouter
@connect(({ employee }) => ({
    employeeRoleList: employee.employeeRoleList,
}), {
    getRoleList,
    getRoleInfo
})
class EmployeeRolePage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {

        }
        this.tableRef = React.createRef();
        this.getTableInfo = this.getTableInfo.bind(this)
        this.goModify = this.goModify.bind(this)
        this.paginationInfo = {}
        this.columns = [{
            key: 'role_name',
            dataIndex: 'role_name',
            title: '角色',
            width:'180px'
        }, {
            key: 'role_permissions',
            dataIndex: 'role_permissions',
            title: '权限内容',
            render: text => {
                const _permissions = []
                text.map(item=>{
                    _permissions.push(item.per_name)
                })
                return _permissions.join(', ')
            },
        }, {
            key: 'operation',
            dataIndex: 'operation',
            title: '操作',
            render: (text, record) => (
                <div className="flex-vertical-center">
                    {record.is_admin ? <div className='ft-clr-ml'>
                        系统默认，不可更改
                    </div> :
                        <>
                            <div data-id={record.role_id} onClick={this.goModify} className="mgr-8 ft-hover">编辑</div>
                            <DoubleCheck>
                                <div className="mgr-8 ft-hover">删除</div>
                            </DoubleCheck>
                        </>
                    }
                </div>
            )
        }]
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    getTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        this.props.getRoleList({
            pageNo: current,
            pageSize,
        })
        this.setUrlQuery()
    }

    setUrlQuery() {
        const { current, pageSize } = this.paginationInfo
        const { history } = this.props
        let params = {
            pageNo: current,
            pageSize
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    goCreatePage() {
        const { history } = this.props
        history.push(`/employee/role/create`)
    }

    goModify(e){
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        const { id } = e.currentTarget.dataset
        this.props.getRoleInfo({
            id: id
        }, (res) => {
            history.push({
                pathname: `/employee/role/edit/${id}`,
                state: {
                    ...res
                }
            })
        })
    }

    render() {
        const { employeeRoleList } = this.props
        return (
            <div className="table-scroll-container">
                <div className="table-params page-params flex-row-between mgb-16">
                    <div className="flex-vertical-center">
                        <Button type="primary" className="button-small mgr-16" onClick={this.goCreatePage.bind(this)}><BilinIcon type="plus" className="ft-18 mgr-8"/>新建</Button>
                    </div>
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="productList" onChange={this.getTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={this.columns}
                            dataSource={employeeRoleList.roles || []}
                        />
                    </div>
                    <div className="table-pagination">
                        <CustomizeTablePagination
                            total={employeeRoleList.roles?.length}
                        />
                    </div>
                </CustomizeTableProvide>
            </div>
        )
    }
}

export default EmployeeRolePage